<template>
    <div class="supplier-detail">
        <a-modal width="900px" :visible="visible" :title="modalOption.title" @cancel="modalOption.onCancel"
            class="yuan-modal supplier-detail-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="供应商名称">
                                <span class="yuan-form-show">{{ formData.name }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="备案品种">
                                <span
                                    class="yuan-form-show">{{ formData.recordVarietyArr&&formData.recordVarietyArr.join(',') }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="联系方式">
                                <span class="yuan-form-show">{{ formData.phone }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="联系人">
                                <span class="yuan-form-show">{{ formData.contact }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="所在地区">
                                <span class="yuan-form-show">{{ formData.placeArea }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="详细地址">
                                <span class="yuan-form-show">{{ formData.detailedAddress }}</span>
                            </a-form-model-item>
                        </div>
                    </div>

                    <div class="form-panel yuan-container">
                        <div class="form-panel-title">供货信息</div>
                        <div class="form-panel-box">
                            <div class="filter-panel">
                                <div class="filter-list">
                                    <span class="filter-label">选择品种：</span>
                                    <a-select class="yuan-form-input" placeholder="请选择" @change="listTypeChange" allowClear>
                                        <a-select-option :value="item.materialCode" v-for="item in formData.recordVariety"
                                            :key="item.materialCode">{{item.varietyName}}</a-select-option>

                                    </a-select>
                                </div>
                                <div class="filter-tips">供货累计数量：{{formData.supplyQuantity}}{{formData.unit}}</div>
                            </div>
                            <a-table bordered :rowKey="(item,index)=>'supply_'+index" :columns="columns"
                                :data-source="pageList" :pagination="false"></a-table>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <a-button type="primary" @click="modalOption.onCancel">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi, { ProListRes } from "@/api/nextApi";
import Upload from "@/components/upload.vue";
@Component({
    name: "detail",
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) infoId!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) this.getDetail();
    }
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    columns = [
        {
            align: "center",
            dataIndex: "enterStorageTime",
            key: "enterStorageTime",
            title: "入库时间",
        },
        {
            align: "center",
            dataIndex: "enterStorageBatch",
            key: "enterStorageBatch",
            title: "入库批号",
        },
        {
            align: "center",
            dataIndex: "varietyName",
            key: "varietyName",
            title: "品名",
        },
        {
            align: "center",
            dataIndex: "enterStorageNum",
            key: "enterStorageNum",
            title: "数量",
        },
    ];
    formLoading = false;
    modalOption = {
        title: "供应商详情",
        onCancel: this.closeModal,
    };
    formData: any = {};
    pageList: any[] = [];
    async getDetail() {
        this.formLoading = true;
        try {
            if (this.infoId) {
                const res = await nextApi.getSupplierDetail({ id: this.infoId });
                const recordVarietyArr = res.data.recordVariety.map((item) => item.varietyName);
                this.formData = { ...res.data, recordVarietyArr };
                this.pageList = [...res.data.supplierInfo];
            }
        } finally {
            this.formLoading = false;
        }
    }
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
    pageChange() {}
    listTypeChange(materialCode: string) {
        if(materialCode){
            this.pageList = this.formData.supplierInfo.filter((item: any) => item.materialCode === materialCode);
        }else{
            this.pageList = [...this.formData.supplierInfo];
        }
        
    }
}
</script>
<style lang="scss">
.supplier-detail-modal {
}
</style>
